<template>
    <div class="wrapper">
        <v-head @loginout="isLogout = true" @setPassword="showPw"></v-head>
        <v-sidebar :menus="menu"></v-sidebar>
        <div class="content-box" :class="{ 'content-collapse': collapse }">
            <v-tags></v-tags>
            <div class="content">
                <transition name="move" mode="out-in">
                    <keep-alive :include="tagsList">
                        <router-view></router-view>
                    </keep-alive>
                </transition>
                <el-backtop target=".content"></el-backtop>
            </div>
        </div>
        <!-- 状态弹出框 -->
        <el-dialog class="popView" :visible.sync="isLogout" v-if="isLogout" :show-close="false" width="200px">
            <div class="main">
                <span class="title">确定退出登录？</span>
                <div class="btns">
                    <el-button @click="isLogout = false">取 消</el-button>
                    <el-button type="primary" @click="loginout">退出</el-button>
                </div>
            </div>
        </el-dialog>
        <!-- 状态弹出框 -->
        <el-dialog class="popView" :visible.sync="isChangepw" v-if="isChangepw" :show-close="false" width="300px">
            <div class="main">
                <span class="title">修改密码</span>
                <el-input class="input" v-model="oldPw" placeholder="请输入旧密码"></el-input>
                <el-input class="input" v-model="newPw" placeholder="请输入新密码"></el-input>
                <span class="desc">密码长度6~12位，仅限字母、数字、下划线</span>
                <el-input class="input" v-model="newPw1" placeholder="请再次输入新密码"></el-input>
                <div class="btns">
                    <el-button style="width:100px" @click="isChangepw = false">取 消</el-button>
                    <el-button style="width:100px" type="primary" @click="setPassword">确认修改</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import vHead from './Header.vue';
import vSidebar from './Sidebar.vue';
import vTags from './Tags.vue';
import bus from './bus';
var base64js = require('js-base64');
export default {
    data() {
        return {
            tagsList: [],
            collapse: false,
            menu: [],
            isLogout: false,
            isChangepw: false,
            oldPw: '',
            newPw: '',
            newPw1: ''
        };
    },
    components: {
        vHead,
        vSidebar,
        vTags
    },
    created() {
        bus.$on('collapse-content', msg => {
            this.collapse = msg;
        });

        // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
        bus.$on('tags', msg => {
            let arr = [];
            for (let i = 0, len = msg.length; i < len; i++) {
                msg[i].name && arr.push(msg[i].name);
            }
            this.tagsList = arr;
        });
    },
    mounted() {
        this.menu = JSON.parse(localStorage.getItem('menu'));
        // console.log("🚀 ~ file: Home.vue ~ line 53 ~ mounted ~ localStorage.getItem('menu')", localStorage.getItem('menu'));
    },
    methods: {
        loginout() {
            this.$api
                .get({
                    url: '/auth/logout'
                })
                .then(res => {
                    if (res.code == 200) {
                        localStorage.removeItem('ms_username');
                        this.$router.push('/login');
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
        },
        showPw() {
            this.oldPw = '';
            this.newPw = '';
            this.newPw1 = '';
            this.isChangepw = true;
        },
        setPassword() {
            if (!this.oldPw || this.oldPw.length == 0) {
                this.$message.error('请输入旧密码');
                return;
            }
            var regex = new RegExp('^[a-zA-Z0-9_]{6,12}$');
            if (!regex.test(this.newPw)) {
                this.$message.error('新密码不符合要求请重新输入');
                return;
            }
            if (this.newPw != this.newPw1) {
                this.$message.error('两次输入密码不一致，请重新输入');
                return;
            }
            this.$api
                .post({
                    url: '/auth/modifyPw',
                    data: {
                        loginNo: localStorage.getItem('ms_username'),
                        oldPassword: base64js.btoa(this.oldPw),
                        password: base64js.btoa(this.newPw)
                    }
                })
                .then(res => {
                    if (res.code == 200) {
                        this.$message({
                            message: '修改密码成功，请重新登录',
                            type: 'success'
                        });
                        this.loginout();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
        }
    }
};
</script>
<style lang="scss" scoped>
/deep/.popView {
    display: flex;
    align-items: center;
    justify-content: center;
    .el-dialog__header {
        padding: 0;
    }
    .el-dialog__body {
        padding: 0;
    }
    .main {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #fff;
        border-radius: 5px;
        padding: 20px 0;
        .title {
            font-size: 17px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .input {
            width: 260px;
            margin-top: 10px;
        }
        .desc {
            width: 260px;
            font-size: 12px;
            color: red;
        }
        .btns {
            margin-top: 10px;
            width: 100%;
            display: flex;
            justify-content: space-around;
        }
    }
}
</style>
